<!DOCTYPE html>
<html  onselectstart='return false'>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
			    padding:0;
			    margin:0;
			}
			body{
			    background:#000;
			    overflow:hidden;
			}
			#wrap{
			    width:133px;
			    height:200px;
			    margin: 200px auto;
			    position:relative;
			    transform-style:preserve-3d;
			    transform:perspective(900px) rotateX(-10deg) rotateY(0deg);
			}
			#wrap img{
			    position:absolute;
			    top:0;
			    left:0;
			    box-shadow: 0 0 10px #FFFFFF;
			    border-radius:10px;
			    box-reflect:below 8px linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%);
			    -webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
		    <img src="img/1-1.jpg">
		    <img src="img/1-2.jpg">
		    <img src="img/1-3.jpg">
		    <img src="img/1-4.jpg">
		    <img src="img/1-5.jpg">
			<img src="img/1-4.jpg">
			<img src="img/1-5.jpg">
			<img src="img/1-4.jpg">
			<img src="img/1-5.jpg">
			<img src="img/1-4.jpg">
			<img src="img/1-5.jpg">
		</div>
	</body>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		// $(function(){
		//     $('#wrap img').each(function(i) {
		//         //遍历 $('#wrap img')----改变他们的css样式
		//         $(this).css('transform', 'rotateY('+ i*2*Deg +'deg) translateZ(350px)').attr('ondragstart','return false');
		//     　　//旋转以及禁止拖拽复制
		//     });
		// });
		
		$(function(){
		            var imgL = $('#wrap img').length;
		            //获取当前的img 长度
		            console.log($('#wrap img').length);
		            var Deg = 360 / imgL; 
		            //  360/imgL   和角度有关系
		            var roY = 0,roX = -10,xN,yN,play=null; 
		            //挨个赋值
		
		            $('#wrap img').each(function(i) {
		            //遍历 $('#wrap img')----改变他们的css样式
		                $(this).css('transform', 'rotateY('+ i*Deg +'deg) translateZ(350px)')
		                .attr('ondragstart','return false');
		                //旋转以及禁止拖拽复制
		            });
		
		           $(document).mousedown(function(ev){
		            //绑定事件  鼠标按下时触发的时间
		                clearInterval( play );
		                //关闭计时器(play)
		                var x_ = ev.clientX;
		                //获取当前鼠标相对于浏览器页面（或客户区）的  x  方向的位置 保存在变量 x_
		                var y_ = ev.clientY;
		                //………………y方向的位置  保存在变量y_
		
		                $(this).bind('mousemove',function(ev){
		                //给当前元素 （这里的当前元素是document ）绑定 mousemove（鼠标在当前元素内移动的事件）
		                    var x = ev.clientX;
		                    //获取当前鼠标相对于浏览器页面（或客户区）的  x  方向的位置    保存在变量 x
		                    var y = ev.clientY;
		                    //………………y方向的位置   保存在变量y
		
		                    xN = x - x_;  
		                    //计算鼠标在当前元素内 相对 上次鼠标按下时的 x轴距离  并保存在变量
		                    yN = y - y_;
		                    //计算鼠标在当前元素内 相对 上次鼠标按下时的 y轴距离  并保存在变量
		
		                    roY += xN*0.2;
		                    //按照比例换算  并在变量基础上增加
		                    roX +=yN*0.07; 
		                    //按照比例换算  并在变量基础上增加
		
		                    $('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)'); 
		                    //$('#wrap')  改变css动画transform样式  值为…………角度是变量roY,roX的
		
		                    x_ = ev.clientX; 
		                    //并将鼠标按下的位置设置成当前移动到的位置
		                    y_ = ev.clientY; 
		                    //并将鼠标按下的位置设置成当前移动到的位置
		                });
		            }).mouseup(function(){  
		            //绑定事件  鼠标松开时触发的时间
		                $(this).unbind('mousemove');
		                //  移除 当前元素（这里的当前元素是document ）的 mousemove（鼠标在当前元素内移动的事件）
		               play = setInterval(function(){
		                //开始周期性计时器
		                    xN = xN * 0.95;
		                    //按照比例换算 
		                    yN = yN * 0.95;
		                    //按照比例换算 
		                    if ( Math.abs(xN) <= 0.5 && Math.abs(yN)<= 0.5 )
		                    //判断  (xN的绝对值<=0.5)而且 yN的绝对值也要<= 0.5)的时候就执行下面的语句
		                    {
		                        clearInterval( play );
		                        //关闭计时器(play)
		                    }
		                    roY += xN*0.2; 
		                    //按照比例换算  并在变量基础上增加
		                    roX +=yN*0.07;
		                    //按照比例换算  并在变量基础上增加
		                    $('#wrap').css('transform','perspective(800px) rotateX('+ roX +'deg) rotateY('+ roY +'deg)');
		                    //$('#wrap')  改变css动画transform样式  值为…………角度是变量roY,roX的
		                },30);
		                //计时器每30毫秒触发一次
		            });
		        });
	</script>
</html>
